<template>
  <!-- 预约详情 -->

  <view class="nav">
    <view class="area">
      <h3>联系人信息</h3>
      <view class="acea-row row-between goods-total">
        <text class="title">姓名</text>
        <text class="num">白晚班</text>
      </view>
      <view class="acea-row row-between goods-total">
        <text class="title">电话</text>
        <text class="num">15897396361</text>
      </view>
    </view>
    <view class="area">
      <h3>购药信息</h3>
      <view class="acea-row row-between goods-total">
        <text class="title">预约时间</text>
        <text class="num">2022-10-14 16:00:00</text>
      </view>
      <view class="acea-row row-between goods-total">
        <text class="title">预约方式</text>
        <text class="num">到店自取</text>
      </view>
      <view class="acea-row row-between goods-total">
        <text class="title">预约药店</text>
        <text class="num">达嘉维康五一路店</text>
      </view>
      <view class="acea-row row-between goods-total">
        <text class="title">药店地址</text>
        <text class="num">湖南长沙达嘉维康五一路店</text>
      </view>
      <view class="acea-row row-between goods-total">
        <text class="title">药店联系方式</text>
        <view class="num flex-align" @click="phoneCall">
          <text> 18675667652</text>
          <u-icon name="phone" color="#2979ff" size="30" style="margin-left: 20upx"></u-icon>
        </view>
      </view>
      <view class="acea-row row-between goods-total">
        <text class="title">药品名称</text>
        <view class="num" style="text-align: right">
          <view style="margin-bottom: 10rpx">安诗婷(北伐主单坑注射液)*5盒</view>
          <view>15mg*5片</view>
        </view>
      </view>
      <view class="acea-row row-between goods-total">
        <text class="title">药品通用名</text>
        <text class="num">999感冒灵</text>
      </view>
      <view class="acea-row row-between goods-total">
        <text class="title">厂家</text>
        <text class="num">湖南长沙岳麓区</text>
      </view>
      <view class="acea-row row-between goods-total">
        <text class="title">参考价</text>
        <text class="num">￥1500</text>
      </view>
      <view class="red" style="font-size: 24rpx">*实际价格以门店价格为准</view>
      <view class="acea-row row-between goods-total">
        <text class="title">购买数量</text>
        <text class="num">5</text>
      </view>
    </view>
    <view class="area">
      <h3>患者信息</h3>
      <view class="acea-row row-between goods-total">
        <text class="title">姓名</text>
        <text class="num">白晚班</text>
      </view>
      <view class="acea-row row-between goods-total">
        <text class="title">身份证</text>
        <text class="num">15897396321312361</text>
      </view>
      <view class="acea-row row-between goods-total">
        <text class="title">手机号</text>
        <text class="num">158973963</text>
      </view>
      <view class="acea-row row-between goods-total">
        <text class="title">联系人与患者关系</text>
        <text class="num">本人</text>
      </view>
    </view>
    <view class="area">
      <h3>处方信息</h3>
      <view class="acea-row row-between goods-total">
        <u--image
          :showLoading="true"
          src="https://cdn.uviewui.com/uview/album/1.jpg"
          width="80px"
          height="80px"
        ></u--image>
      </view>
    </view>
  </view>
</template>

<script>
import { list } from '@/api/demo'
import { test } from '@/api/user'

export default {
  data() {
    return {}
  },
  mounted() {},
  methods: {
    phoneCall() {
      uni.makePhoneCall({
        phoneNumber: '123123213'
      })
    },
    getDetail() {
      uni.showLoading({ title: '数据加载中...' })
    },
    getList(isRefresh) {
      uni.showLoading({ title: '数据加载中...' })
      list({
        ...this.pageOption
      })
        .then((res) => {
          this.mixinFormatRes(
            res,
            (v) => ({
              ...v,
              imgUrl: v.img // 主要是格式化列表字段，比如时间、图片链接、转换的统一处理
            }),
            isRefresh
          )
        })
        .finally(() => {
          uni.hideLoading()
          uni.stopPullDownRefresh()
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.red {
  color: red;
}
.area {
  display: flex;
  flex-direction: column;
  padding: 25rpx 0;
  border-top: 1px dotted #999999;
}
.area:first-child {
  padding-top: 0 !important;
  border-top: none;
}
.agin {
  justify-content: center !important;
  color: #3c9cff;
  font-size: 26rpx;
}
.nav {
  margin: 20rpx auto 40rpx auto;
  display: flex;
  flex-direction: column;
  padding: 35rpx;
  box-shadow: 0px 0px 4px 0px rgba(242, 117, 96, 0.1);
  border-radius: 20rpx;
  background-color: #fff;
  width: 690rpx;
  .goods-total {
    margin: 20upx 0;
    line-height: 25upx;
    display: flex;
    justify-content: space-between;
    .title {
      font-size: 26upx;
      color: #333333;
    }

    .num {
      font-size: 26upx;
      color: #999999;
    }
  }
}
</style>
